import { createRouter, createWebHashHistory } from 'vue-router'

// const Layout = () => { import ('@/views/Layout') };
// const Home = () => { import ('@/views/home') }
import Layout from '@/views/Layout'
import Home from '@/views/home'
import SubCategory from '@/views/category/sub'
import TopCategory from '@/views/category'

// 路由规则
const routes = [
    // 一级路由布局容器
    {
        path: '/',
        component: Layout,
        children: [
            { path: '/', component: Home },
            { path: '/category/:id', component: TopCategory },
            { path: '/category/sub/:id', component: SubCategory },
        ]
    }
]

// vue2.0 new VueRouter({}) 创建路由实例
// vue3.0 createRouter({}) 创建路有实例
const router = createRouter({
    // 使用hash方式实现路由
    history: createWebHashHistory(),
    // 配置路由规则，写法和之前一样
    routes,
    // 每次切换路由都会滚动到页面顶部
    scrollBehavior(to, from, savedPosition) {
        // vue2.0 由x，y控制
        return { left: 0, top: 0 }
    }
})

export default router